<template>
  <view class="home">
    <u-text text="反馈类型" color="#000" size="14"></u-text>
    <u-row gutter="12">
      <u-col span="3" v-for="(item,index) in data.list" :key="index">
        <view :class="data.current==index?'active':'inactive'" @click="data.current = index">{{item.name}}</view>
      </u-col>
    </u-row>
    <u-text text="反馈类型" color="#000" size="14"></u-text>
    <u-textarea placeholder="请输入您遇到的问题" v-model="params.content"></u-textarea>
    <view class="action-btn" @click="_feedbackCreate">提交</view>
  </view>
</template>

<script setup>
  import {
    computed,
    ref
  } from 'vue';
  import { feedbackCreate } from '../../config/api';
  const data = ref({
    current: 0,
    list: [{ type: 1, name: '建言献策' }, { type: 2, name: '意见反馈' }, ]
  })
  const params = ref({
    content: '',
    type: computed(() => data.value.list[data.value.current].type)
  })
  const _feedbackCreate = () => {
    feedbackCreate(params.value).then(res => {
      uni.$u.toast(res.msg)
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    padding: 12rpx 20rpx;
    background: #fff;
    min-height: 100vh;

    ::v-deep .u-row {
      flex-wrap: wrap;
    }

    ::v-deep .u-textarea {
      border-color: #f8f8f8;
      background-color: #f8f8f8;
      margin-top: 20rpx;
    }
  }

  .inactive,
  .active {
    height: 56rpx;
    border-radius: 12rpx;
    line-height: 56rpx;
    font-weight: 500;
    text-align: center;
    margin: 20rpx auto 0;
  }

  .inactive {
    color: #555;
    border: 1px solid #555;
  }

  .active {
    background: #F87610;
    color: #fff;
    border: 1px solid #F87610;
  }

  .action-btn {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 30rpx;
    right: 30rpx;
    color: #fff;
    font-size: 30rpx;
    background: #F87610;
    line-height: 90rpx;
    border-radius: 50rpx;
    text-align: center;
  }
</style>